<template>
  <div class="wrapper">
    <h2 class="tip">
      温馨提示：您当前的 IE 浏览器版本过低，存在安全风险，建议升级浏览器
    </h2>
    <div class="txt2">
      <p class="t">请升级使用以下浏览器打开</p>
    </div>
    <ul class="item-box">
      <li class="item">
        <a
          target="_blank"
          href="https://www.mozilla.org/zh-CN/firefox/"
        >
          <p class="img"><img
              src="@/assets/img/logo-quantum.png"
              alt="火狐浏览器"
            /></p>
          <span class="btn">前往下载</span>
        </a>
      </li>
      <li class="item">
        <a
          target="_blank"
          href="https://www.google.cn/chrome/"
        >
          <p class="img"><img
              src="@/assets/img/chrome-logo.svg"
              alt="谷歌浏览器"
            /></p>
          <span class="btn">前往下载</span>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
    name: 'download'
}
</script>
<style lang="less" scoped>
    .wrapper{
        width: 900px;
        margin: 0 auto;
        padding-top: 200px;
    }
    .wrapper .tip{
        text-align: center;
        font-family: MicrosoftYaHei;
        font-size: 24px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #fff;
        background: #ff3040;
        padding: 10px;
    }
    .wrapper .txt2{
        position: relative;
        width: 713px;
        height: 1px;
        background: #ededed;
        margin: 0 auto;
        margin-top: 60px;
    }
    .wrapper .txt2 .t{
        background: #fff;
        position: absolute;
        top:-10px;
        left: 50%;
        padding: 0 20px;
        margin-left:-88px;
    }
    ul,li{
        list-style: none;
    }
    .item-box{width: 713px; margin: 0 auto; margin-right: 150px; font-size: 0; text-align: center; margin-top:50px;}
    .item-box .item{
        width: 86px;
        display: inline-block;
        *display:inline;*zoom:1;
        text-align: center;
        margin-left: 128px;
    }
    .item-box .item .img{
        width: 86px;
    }
    .item-box .item .img img{
        width: 86px;
        height: auto;
    }
    .item-box .item .btn{
        /* font-size: 14px;
        text-decoration: underline;
        margin-top: 20px;
        display: inline-block;
        background: #ff3040;
        color: #fff;
        padding: 6px 12px; */
        font-size: 14px;
        text-decoration: underline;
        margin-top: 20px;
        display: inline-block;
        color: #4a8af4;
        padding: 6px 12px;
    }
</style>
